import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Upload,
  Icon,
  Button,
  Card,
} from 'antd';
import config from '../../config';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
export default class Personal extends PureComponent {
  constructor(state) {
    super(state);
    this.state = {
      loading: false,
      fileList: [],
    };
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };
  render() {
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const props = {
      name: 'file',
      action: config.upload_server_url,
      data: {
        accessToken: '',
      },
      multiple: true,
      listType: 'picture-card',
      fileList: '',
      onRemove: this.handleRemove,
      customRequest: this.handelCustomRequest,
    };

    return (
      <PageHeaderLayout
        title="修改我的基本信息"
        content="用于展示在APP中"
      >
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="笔名">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入笔名',
                  },
                ],
              })(<Input placeholder="给自己起个好笔名" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="头像">
              <Upload {...props}>
                {this.state.fileList.length >= 1 ? null : (
                  <div>
                    <Icon type={this.state.loading ? 'loading' : 'plus'} />
                    <div className="ant-upload-text">Upload</div>
                  </div>
                )}
              </Upload>
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
